import React from "react";
import { Button, Switch } from "antd";
import { IconFont } from "@/components/Icon";
import { useGlobalStore } from "@/store/global";
import { useShallow } from "zustand/react/shallow";

interface Props {
  className?: string;
  switchSize?: "small" | "default";
  type?: "button" | "switch";
}

const DarkSwitch: React.FC<Props> = (props) => {
  const { isDark, headerInverted, setGlobalState } = useGlobalStore(useShallow((state) => ({ isDark: state.isDark, headerInverted: state.headerInverted, setGlobalState: state.setGlobalState })));

  return (
    <React.Fragment>
      {props?.type && props?.type === "button" ? (
        <Button
          type="text"
          size="large"
          className={`${props.className} ${headerInverted ? "[&_.ant-btn-icon]:text-white!" : ""}`}
          icon={<IconFont style={{ fontSize: 24 }} type={isDark ? "icon-sun" : "icon-moon"} />}
          onClick={() => requestAnimationFrame(() => setGlobalState({ key: "isDark", value: !isDark }))}
        />
      ) : (
        <div className={props.className}>
          <Switch
            size={props.switchSize ?? "default"}
            checked={isDark}
            checkedChildren={<span className="lt-sm:text-[12px] text-[16px]">🌞</span>}
            unCheckedChildren={<span className="lt-sm:text-[12px] text-[16px]">🌛</span>}
            onChange={(value) => requestAnimationFrame(() => setGlobalState({ key: "isDark", value }))}
          />
        </div>
      )}
    </React.Fragment>
  );
};

export default React.memo(DarkSwitch);
